<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>添加银行卡</span>
      <div class="right">
      </div>
    </div> -->
    <div class="list">
			<div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">真实姓名：</span>
                <yd-input slot="right" v-model="name" placeholder="请填写您的姓名"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
      </div>
			<div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">身份证号：</span>
                <yd-input slot="right" v-model="num" placeholder="请填写身份证号"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
      </div>
			<div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">开户银行：</span>
                <yd-input slot="right" v-model="abc"  placeholder="请填写开户银行"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
      </div>
			<div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">银行卡号：</span>
                <yd-input slot="right" v-model="yhnum"  placeholder="请填写银行卡号"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
      </div>
		 
			<div>
				<yd-cell-group>
					<yd-cell-item arrow>
						<span slot="left">所在地区：</span>
						<input slot="right" type="text" @click.stop="show1 = true" v-model="model1" readonly placeholder="请选择收货地址">
					</yd-cell-item>
				</yd-cell-group>
				<yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
			</div>
			<div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left">详细地址：</span>
                <yd-input slot="right" show-error-icon=false show-success-icon=false v-model="address" ref="input10" placeholder="请填写详细地址"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
      </div> 
		</div>
		<div class="btn">
			<button class="next" @click="addCard()">下一步</button>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import {CitySelect} from 'vue-ydui/dist/lib.rem/cityselect';
Vue.component(CitySelect.name, CitySelect);
import District from 'ydui-district/dist/jd_province_city_area_id';

import {Input} from 'vue-ydui/dist/lib.rem/input';
Vue.component(Input.name, Input);
export default {
  name: 'addcar',
  data () {
    return {
     index:0,
		 isshow:false,
		 show1: false,
		 district: District,
		 
		 name:'',
		 num:'',
		 abc:'',
		 yhnum:'',
		 model1:'',
		 address:''
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
		},
		result1(ret) {
      this.model1 = ret.itemName1 + ',' + ret.itemName2 + ',' + ret.itemName3;
		},
		addCard:function(){ 
			let self = this;
			if(!this.name){
				this.$dialog.toast({mes:"请输姓名"});
				return
			}
			if(!this.num){
				this.$dialog.toast({mes:"请输入身份证号"});
				return
			}  
			if(!this.abc){
				this.$dialog.toast({mes:"请选择银行卡名称"});
				return
			} 
			if(!this.yhnum){
				this.$dialog.toast({mes:"请选择银行卡号码"});
				return
			} 
			if(!this.model1){
				this.$dialog.toast({mes:"请选择地址"});
				return
			} 
			if(!this.address){
				this.$dialog.toast({mes:"请输入详细地址"});
				return
			} 
      let url = "/api/bank_card/add";
			self.httpPost(url,{user_id:this.myid,token:this.token,name:this.name,id_card_number:this.num,id_bank_card:this.yhnum,open_bank:this.abc,cityadder:this.model1,address:this.address},function(res) {
				if (res.code === 200) {
					self.$dialog.toast({mes:res.msg});
					setTimeout(() => {
						self.back(); 
					}, 1000); 
				}else{
				 	self.$dialog.toast({mes:res.msg});
        }
      })
		},
	},
	created(){
    document.title = "添加银行卡";
    this.token = localStorage.getItem('mytoken');
		this.myid = localStorage.getItem('myid'); 
	},
}
</script>


<style scoped>
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}
.list{
	width:100%;
	padding: 0 .3rem;
	background: #FFF;
}
.list .box{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	align-items: center;
}
.list .box .info{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
}
.list .box .info .s{
	border:none !important;
}
.list .box .info span{
	font-size: .28rem;
	color:#333;
	vertical-align: middle;
}
.btn{
	width:100%;
	display: flex;
	justify-content: center;
	margin-top: .4rem;
}
.btn .next{
	width: 90%;
	height:.90rem;
	background: #e63f3f;
	border: none;
	border-radius: 10px;
	font-size: .32rem;
	color:#FFF;
}
.box span{
	font-size: .28rem;
	color:#333;
	vertical-align: middle;
}
.box input{
	border:none;
	margin-left: .2rem;
}


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #999; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #999; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
color: #999; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color: #999; 
} 
</style>

<style>
.yd-cell-box{
	margin: 0;
	border:none;
	border-bottom: 1px solid #eee;
}
.yd-cell:after{
	height:0;
}
.yd-cell-item{
	padding: 0;
}
.yd-cell-left{
	font-size:.28rem;
	color:#333;
}
.yd-cell-right{
	margin-left: .2rem;
}
/* .yd-cell-right input[type=text]{
	font-size:.28rem !important;
	color: red!important;
} */
.yd-cell-right input[type=text]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-cell-right input[type=text]:-moz-placeholder, textarea:-moz-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-cell-right input[type=text]::-moz-placeholder, textarea::-moz-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-cell-right input[type=text]:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	font-size:.28rem !important;
	color: #999; 
} 
.yd-input-clear{
	display: none;
}
</style>

